<template>
  <view class="change-password-page">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="page-title">修改密码</text>
    </view>

    <!-- 表单 -->
    <view class="form-container">
      <view class="form-group">
        <text class="form-label">新密码</text>
        <input
          class="form-input"
          v-model="newPassword"
          type="password"
          placeholder="请输入新密码"
          maxlength="20"
        />
      </view>
      <view class="form-group">
        <text class="form-label">确认密码</text>
        <input
          class="form-input"
          v-model="confirmPassword"
          type="password"
          placeholder="请再次输入新密码"
          maxlength="20"
        />
      </view>
    </view>

    <!-- 确认按钮 -->
    <view class="button-row">
      <button class="reset-btn" @click="onReset">重置</button>
      <button class="confirm-btn" @click="onSubmit">确认</button>
    </view>
  </view>
</template>

<script>
import { updateUserInfo } from '@/api/user.js'

export default {
  data() {
    return {
      userId: '',
      newPassword: '',
      confirmPassword: ''
    }
  },
  onLoad() {
    this.userId = uni.getStorageSync('userId')
  },
  methods: {
    async onSubmit() {
      if (!this.newPassword || !this.confirmPassword) {
        uni.showToast({ title: '请输入新密码', icon: 'none' })
        return
      }
      if (this.newPassword.length < 6) {
        uni.showToast({ title: '密码长度至少6位', icon: 'none' })
        return
      }
      if (this.newPassword !== this.confirmPassword) {
        uni.showToast({ title: '两次输入的密码不一致', icon: 'none' })
        return
      }
      try {
        const res = await updateUserInfo({
          userId: this.userId,
          password: this.newPassword
        })
        if (res && res.code === 1000) {
          uni.showToast({ title: '密码修改成功', icon: 'success' })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      } catch (error) {
        uni.showToast({ title: '修改失败，请重试', icon: 'none' })
      }
    },
    onReset() {
      this.newPassword = ''
      this.confirmPassword = ''
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.change-password-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  position: relative;
  height: 60px;
  background: linear-gradient(135deg, #5bb8ac 0%, #4a9c91 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}

.back-button {
  position: absolute;
  left: 20px;
  top: 30px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.page-title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.form-container {
  background: #fff;
  margin: 20px;
  border-radius: 12px;
  padding: 0 20px;
}

.form-group {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.form-group:last-child {
  border-bottom: none;
}

.form-label {
  width: 80px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.form-input {
  flex: 1;
  font-size: 14px;
  color: #333;
  padding: 0;
  border: none;
  background: transparent;
}

.button-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  margin: 30px 20px;
}

.confirm-btn, .reset-btn {
  width: 32%;
  padding: 8px 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  transition: all 0.2s;
}

.confirm-btn {
  background: linear-gradient(135deg, #5bb8ac 0%, #4a9c91 100%);
  color: #fff;
}

.confirm-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.reset-btn {
  background: #fff;
  color: #5bb8ac;
  border: 1.5px solid #5bb8ac;
}

.reset-btn:active {
  background: #f0f8f7;
  color: #4a9c91;
  border-color: #4a9c91;
}
</style> 